<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">学习记录</view>
			<view class="right" @click="toggleSearch">
				<view v-if="isShowSearch">
					<uni-icons type="arrowup" size="20" color="#999"></uni-icons>
					<text>收起</text>
				</view>
				<view v-else>
					<uni-icons type="arrowdown" size="20" color="#999"></uni-icons>
					<text>展开</text>
				</view>
			</view>
		</view>
		<!--查询-->
		<view v-show="isShowSearch" class="search">
			<view class="item flex-row">
				<picker @change="changeCategory" :value="categoryIndex" :range="categories" range-key="name">
					<view class="uni-input">{{ categories[categoryIndex] ? categories[categoryIndex].name : '' }}</view>
				</picker>
				<uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
			</view>
			<view class="item flex-row">
				<input v-model="search.title" type="text" placeholder="主题或名称" style="width: 100%;"/>
			</view>
			<view class="item flex-row">
				<input v-model="search.teacher" type="text" placeholder="专家名称" style="width: 100%;"/>
			</view>
			<view class="item flex-row">
				<view class="label">起始时间：</view>
				<view class="right">
					<picker mode="date" :value="startDate" :end="endDeadDate" @change="changeStartDate">
						<view class="date-text">{{ startDate }}</view>
					</picker>
				</view>
				<uni-icons type="arrowright" size="20" color="#666"></uni-icons>
			</view>
			<view class="item flex-row">
				<view class="label">截至时间：</view>
				<view class="right">
					<picker mode="date" :value="endDate" :start="endStartDate" :end="endDeadDate" @change="changeEndDate">
						<view class="date-text">{{ endDate }}</view>
					</picker>
				</view>
				<uni-icons type="arrowright" size="20" color="#666"></uni-icons>
			</view>
			<button @click="searchList" type="primary" class="item" style="background: #1692DC;">查询</button>
		</view>
		<!--列表-->
		<scroll-view v-if="list.length" @scrolltolower="getNextPageData" scroll-y="true" class="scroll" :class="{full: !isShowSearch}">
			<view v-for="(item, index) in list" :key="index" class="card">
				<view class="title flex-row">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：{{ item.topic }}</view>
				<view class="title flex-row">
					<view>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：{{ item.type }}</view>
					<view style="width: 50%;">专家名称：{{ item.teacher || '无专家' }}</view>
				</view>
				<view class="item flex-row"><view>创建时间：{{ item.addtime }}</view></view>
				<view class="item flex-row"><view>开始时间：{{ item.start_time }}</view></view>
				<view class="item flex-row"><view>结束时间：{{ item.over_time }}</view></view>
				<view class="item flex-row"><view>学习时长：{{ item.study_time || 0 }}分钟</view></view>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
		<view v-else class="nodata">没有更多了~</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { getLastMonth } from '../../../common/function.js';
export default{
	components: { uniIcons },
	data(){
		return {
			isShowSearch: true,
			categories: [
				{ id: 1, name: '专家授课' },
				{ id: 2, name: '案例教育' },
				{ id: 3, name: '行业视频' }
			],
			categoryIndex: 0,
			startDate: '',
			endDate: '',
			endStartDate: '',	// 截至时间的有效开始时间
			endDeadDate: '',	// 截至时间的有效结束时间
			page: 1,
			total: 1,
			list: [],
			search: {
				userid: uni.getStorageSync('userid'),
				type: '专家授课',
				start_time: '',
				over_time: '',
				title: '',
				teacher: ''
			}
		}
	},
	onLoad(){
		this.doDate();
		this.getList();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 切换搜索条件
		toggleSearch(){
			this.isShowSearch = !this.isShowSearch;
		},
		// 切换分类
		changeCategory(e){
			this.categoryIndex = e.detail.value;
			this.search.type = this.categories[this.categoryIndex].name;
		},
		// 切换开始日期
		changeStartDate(e){
			this.startDate = e.detail.value;
			this.endStartDate = this.startDate;
			this.search.start_time = this.startDate;
		},
		// 切换结束日期
		changeEndDate(e){
			this.endDate = e.detail.value;
			this.search.over_time = this.endDate;
		},
		// 处理日期问题
		doDate(){
			let { now, last } = getLastMonth();
			
			// 计算当前日期
			this.endDate = now;
			this.endStartDate = last;
			this.endDeadDate = now;
			
			// 计算上月的今天
			this.startDate = last;
			
			// 赋值
			this.search.start_time = this.startDate;
			this.search.over_time = this.endDate;
		},
		// 检索
		searchList(){
			this.page = 1;
			this.getList();
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.eduVideoMyTaskLog,
				data: this.search,
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>

.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

.scroll{
	height: calc(100vh - 88upx - 620upx - var(--status-bar-height));
}
.scroll.full{
	height: calc(100vh - 88upx - var(--status-bar-height));
}

/*列表*/
.card{
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}
.card .item text{
	color: #999;
	margin-right: 40upx;
}
.card .item.btns{
	margin-bottom: 16upx;
	padding-left: 20upx;
	padding-top: 10upx;
	justify-content: flex-start;
}
.card .item.btns .btn{
	color: #fff;
	width: 160upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	margin-right: 20upx;
	background-color: #1692DC;
}

/*查询*/
.search{
	padding: 20upx 20upx 0;
}
.search .item{
	height: 80upx;
	line-height: 80upx;
	background: #fff;
	border-radius: 10upx;
	margin-bottom: 20upx;
	padding: 0 12upx;
}
.search .item.icon-item{
	height: auto;
}
.search .item.icon-item .icons{
	width: 100%;
	box-sizing: border-box;
	padding: 40upx 40upx 0;
}
.search .item.icon-item .count{
	padding: 0 30upx 12upx;
}
.search .item.icon-item image{
	width: 60upx;
	height: 70upx;
}
.search .item .label{
	width: 160upx;
	color: #797979;
	text-indent: 10upx;
}
.search .item .right{
	width: calc(100% - 160upx);
	height: 100%;
}
.search .item picker,
.search .item .date-text{
	width: 100%;
	height: 80upx;
	line-height: 80upx;
	text-indent: 23%;
}
.search .item .uni-input{
	text-align: center;
	text-indent: 30upx;
}
.search .item input{
	color: #A3A3A3;
	font-size: 28upx;
	text-align: center;
	background: #F0F0F0;
	border-radius: 10upx;
	border: 2upx solid #509EC5;
	width: calc(100% - 120upx);
	height: 56upx;
}
.search .item button,
.search .item uni-button{
	line-height: 2.3;
	width: 112upx;
	margin-left: 8upx;
	background-color: #1692DC;
	font-size: 26upx !important;
}
</style>
